<template>
  <j-modal
    :title="title"
    :width="800"
    :visible="visible"
    :confirmLoading="confirmLoading"
    switchFullscreen
    @ok="handleOk"
    @cancel="handleCancel"
    cancelText="关闭">
    <template slot='footer'>
      <a-button @click='handleCancel'>取消</a-button>
      <a-button v-if='!disableSubmit' type='primary' @click='handleOk'>确认</a-button>
    </template>

    <a-spin :spinning="confirmLoading">
      <a-divider orientation='left' style='font-weight: 600;margin-top: 0px;'>基本信息</a-divider>
      <a-form :form="form">
        <a-col :md="12" :sm="24" >
            <a-form-item
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
              label="竞品名称">
              <a-input v-decorator="['competingName', validatorRules.competingName]" :disabled='disableSubmit' placeholder="请输入竞品名称"/>
            </a-form-item>
        </a-col>
        <a-col :md="12" :sm="24" >
            <a-form-item
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
              label="竞品品牌">
              <a-input v-decorator="['brand', validatorRules.brand]" :disabled='disableSubmit' placeholder="请输入竞品品牌"/>
            </a-form-item>
        </a-col>
        <a-col :md="12" :sm="24" >
            <a-form-item
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
              label="所属系列">
              <a-input-search v-decorator="['classifyName',validatorRules.classifyName]" :disabled='disableSubmit'
                              enter-button placeholder='请输入所属系列' readOnly @search="productSearch('superiorUser')" />
              <a-input v-decorator="[ 'classifyCode', {}]" readOnly type='hidden' />
            </a-form-item>
        </a-col>
        <a-col :md="12" :sm="24" >
          <a-form-item
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
            label="规格">
            <a-input v-decorator="['model']" :disabled='disableSubmit' placeholder="请输入规格"/>
          </a-form-item>
        </a-col>
        <a-col :md="12" :sm="24" >
          <a-form-item
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
            label="建议零售价">
            <a-input-number :min="0" v-decorator="['price']" :disabled='disableSubmit' placeholder="请输入建议零售价" style="width:100%"/>
          </a-form-item>
        </a-col>

      </a-form>
      <a-divider orientation='left' style='font-weight: 600;margin-top: 0px;'>单位信息</a-divider>
      <a-form :form="form">
        <a-col :md="12" :sm="24" >
          <a-form-item
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
            label="基本单位">
<!--            <a-input placeholder="基本单位" v-decorator="['competingName', validatorRules.competingName]"/>-->
            <cn-dict-select-tag v-decorator="['meinst',validatorRules.meinst]" :disabled="disableSubmit"
                                :options="{value:'dictDataCode',label:'dictDataDesc'}" :triggerChange="true"
                                dictCode="cpbasic_unit" placeholder="请选择基本单位"/>
          </a-form-item>
        </a-col>
      </a-form>
      <a-divider orientation='left' style='font-weight: 600;margin-top: 0px;'>单位信息</a-divider>
      <a-form :form="form">
        <a-col :md="12" :sm="24" >
          <a-form-item
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
            label="商品图片">
            <j-image-upload v-decorator="[ 'logo', {}]" :disabled="disableSubmit" class="avatar-uploader"
                            text="上传"></j-image-upload>
          </a-form-item>
        </a-col>
      </a-form>
    </a-spin>
    <proChose ref='prochoose2' v-bind='modalProps' :dataType='dataType' :name='xilie' @okbro='okbropro2'></proChose>
  </j-modal>
</template>

<script>
  import { httpAction } from '@/api/manage'
  import pick from 'lodash.pick'
  import VcTimePicker from 'ant-design-vue/es/vc-time-picker/TimePicker'
  import ARangePicker from 'ant-design-vue/es/date-picker/RangePicker'
  // import JTreeSelect from '@/components/cn-form/JTreeSelect'
  import JImageUpload from '@/components/cn-form/JImageUpload'
  import proChose from '@comp/cn-components/ProChose'

  export default {
    name: 'SfaSignConfigModal',
    components: { ARangePicker, VcTimePicker,JImageUpload,proChose},
    data () {
      return {
        dataType:'3',
        xilie:"系列",
        title:"操作",
        visible: false,
        model: {},
        objs:'',
        labelCol: {
          xs: { span: 24 },
          sm: { span: 6 },
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 16 },
        },

        confirmLoading: false,
        form: this.$form.createForm(this),
        validatorRules:{
          competingName: {
            rules: [{
              required: true, message: '', trigger: 'submit'
            }]
          },
          brand: {
            rules: [{
              required: true, message: '', trigger: 'submit'
            }]
          },
          meinst:{
            rules: [{
              required: true, message: '', trigger: 'submit'
            }]
          },
          classifyName: {
            rules: [{
              required: true, message: '', trigger: 'submit'
            }]
          },
        },
        url: {
          add: window._CONFIG['domianSfaURL']+"/competing/saveOrUpdate",
        },
      }
    },
    methods: {
      productSearch(status) {
        this.$refs.prochoose2.rowKey = 'id'
        let formconfig = [{
          key: 'classifyCode',
          label: '分类编号'
        },
          {
            key: 'classifyName',
            label: '分类名称'
          }
        ]
        let tableconfig = {
          columns: [{
            title: '分类编号',
            align: 'left',
            dataIndex: 'classifyCode',
            width: 120,
            ellipsis: true
          },
            {
              title: '分类名称',
              align: 'left',
              dataIndex: 'classifyName',
              width: 120,
              ellipsis: true
            }
          ],
          list: window._CONFIG['domianURL'] + '/goodsclassify/cnGoodsClassify/findPageList',
          multiple: false,
          columW: 10,
          name:'所属系列'
        }

        this.name = '用户'
        let dataSource = []
          dataSource = [{
            realName: this.form.getFieldValue('classifyName'),
            classifyCode:this.form.getFieldValue('classifyCode')
          }]
        this.$refs.prochoose2.edit(formconfig, tableconfig, 'classifyName','classifyCode', dataSource)
      },
      okbropro2(val) {
        let objs = JSON.parse(JSON.stringify(val[0]))
        console.log(objs)
        this.objs = objs
        this.form.setFieldsValue({
          classifyName: objs.classifyName,
          classifyCode:objs.classifyCode,
        })
      },
      add () {
        this.edit({});
      },
      edit (record) {
        this.form.resetFields();
        this.model = Object.assign({}, record);
        this.visible = true;
        this.model.isRoll = this.model.isRoll+"";
        this.model.isControl = this.model.isControl+"";
        this.$nextTick(() => {
          this.form.setFieldsValue(pick(this.model,'competingName','brand','classifyName','classifyCode','model','meinst','logo','price' ))
        });
      },
      close () {
        this.$emit('close');
        this.visible = false;
      },
      handleOk () {
        const that = this;
        // 触发表单验证
        this.form.validateFields((err, values) => {
          if (!err) {
            that.confirmLoading = true;
            let httpurl = '';
            httpurl += this.url.add;
            let method = '';
            method = 'post';
            let formData = Object.assign(this.model, values);
            //时间格式化
            httpAction(httpurl,formData,method).then((res)=>{
              if(res.success){
                that.$message.success(res.message);
                that.$emit('ok');
              }else{
                that.$message.warning(res.message);
              }
            }).finally(() => {
              that.confirmLoading = false;
              that.close();
            })
          }
        })
      },
      handleCancel () {
        this.close()
      },
    }
  }
</script>

<style scoped>

</style>